<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <script src="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js" charset="utf-8"></script>
</head>

<body>
    <div style="margin: 15px;padding: 15px;background-color: #fff;">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>修改资料</legend>
        </fieldset>
        <form class="layui-form">
            {:token_field()}
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" value="{$row['username']}" readonly required
                        lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">不可更改</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" value="" placeholder="原密码不变请留空" autocomplete="off"
                        class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">演示不更改</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">真实姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="realname" value="{$row['realname']}" required lay-verify="required"
                        placeholder="真实姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">图像</label>
                <div class="layui-input-inline">
                    <input type="text" name="avatar" value="{$row['avatar']}" autocomplete="off"
                        class="layui-input upload">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <script>
        layui.use(['form', 'upload'], function () {
            var upload = layui.upload,
                form = layui.form,
                $ = layui.jquery;

            // 上传
            $('.layui-form .upload').each(function () {
                var input_id = $(this).attr('name');
                $(this).parent().append('<div class="layui-upload-list" style="position:relative;"></div>');
                $(this).parent().parent().append('<button type="button" class="layui-btn layui-btn-primary" id="' + input_id + '-render"><i class="layui-icon layui-icon-upload"></i> 上传</button>');
                if (/\.(gif|jpg|jpeg|png|bmp|webp|psd|svg|tiff)$/gi.test($(this).val())) {
                    $(this).parent().find('.layui-upload-list').html('<i class="layui-icon layui-icon-close-fill" style="position:absolute;bottom:-10px;left:-10px;opacity:0.8;cursor:pointer;"></i><img src="' + $(this).val() + '" alt="Preview" style="max-width:92px" onerror="this.parentNode.innerHTML=\'404 Error\'" />');
                }
                upload.render({
                    elem: '#' + input_id + '-render',
                    url: '/admins/files/upload',
                    data: {},
                    before: function (obj) {
                        layer.load();
                    },
                    done: function (res, index, upload) {
                        layer.closeAll('loading');
                        if (res.code > 0) return layer.msg('上传失败');
                        //上传成功
                        $(this.item).prev().find('input[name="' + input_id + '"]').val(res.data.src)
                        if (/\.(gif|jpg|jpeg|png|bmp|webp|psd|svg|tiff)$/gi.test(res.data.src)) {
                            $(this.item).prev().find('.layui-upload-list').html('<i class="layui-icon layui-icon-close-fill" style="position:absolute;bottom:-10px;left:-10px;opacity:0.8;cursor:pointer;"></i><img src="' + res.data.src + '" alt="Preview" style="max-width:92px" onerror="this.parentNode.innerHTML=\'404 Error\'" />');
                        }
                    },
                    error: function (index, upload) {
                        layer.closeAll('loading');
                    }
                });
            });
            $('.layui-form .upload').change(function () {
                if (/\.(gif|jpg|jpeg|png|bmp|webp|psd|svg|tiff)$/gi.test($(this).val())) {
                    $(this).parent().find('.layui-upload-list').html('<i class="layui-icon layui-icon-close-fill" style="position:absolute;bottom:-10px;left:-10px;opacity:0.8;cursor:pointer;"></i><img src="' + $(this).val() + '" alt="Preview" style="max-width:92px" onerror="this.parentNode.innerHTML=\'404 Error\'" />');
                } else {
                    $(this).parent().find('.layui-upload-list').html(null);
                }
            });
            $('.layui-form .layui-upload-list').on('click', '.layui-icon-close-fill', function () {
                $(this).parent().prev().val(null);
                $(this).parent().html(null);
            });

            // 提交
            form.on('submit(submit)', function (obj) {
                $.post('/admins/account/profile', obj.field, function (res) {
                    if (res.code) return layer.alert(res.msg, { icon: 2 });
                    layer.alert(res.msg, { icon: 1 });
                    setTimeout(() => {
                        // 框架中时
                        if (self.frameElement && self.frameElement.tagName == 'IFRAME') {
                            parent.window.location.reload();
                        } else {
                            window.location.reload();
                        }
                    }, 1000)
                }, 'json');
                return false;
            });

        });

    </script>
</body>

</html>